<template>

  <div class="card">
    <section>
      <div>较上日+{{store.ChinaAdd.localConfirmH5}}</div>
      <div>{{store.ChinaTotal.localConfirm }}</div>
      <div>本土现有确诊</div>
    </section>
    <section>
      <div>较上日+{{store.ChinaAdd.nowConfirm}}</div>
      <div>{{store.ChinaTotal.nowConfirm }}</div>
      <div>现有确诊</div>
    </section>
    <section>
      <div>较上日+{{store.ChinaAdd.confirm}}</div>
      <div>{{store.ChinaTotal.confirm }}</div>
      <div>累计确诊</div>
    </section>
    <section>
      <div>较上日+{{store.ChinaAdd.noInfect}}</div>
      <div>{{store.ChinaTotal.noInfect }}</div>
      <div>无症状感染者</div>
    </section>
    <section>
      <div>较上日+{{store.ChinaAdd.importedCase}}</div>
      <div>{{store.ChinaTotal.importedCase }}</div>
      <div>境外输入</div>
    </section>
    <section>
      <div>较上日+{{store.ChinaAdd.dead}}</div>
      <div>{{store.ChinaTotal.dead }}</div>
      <div>累计死亡</div>
    </section>
  </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useStore } from '../stores/index'

const store = useStore()

</script>
<style lang="less" scoped>
.card {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  
  section{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #223651;
    border: 1px solid #212028;
    color: white;
    padding: 10px 0;
    white-space: nowrap;
  }
  div:nth-child(2){
    color: #41b0db;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
  }
}
</style>